<template>
  <!-- 导航界面 -->

  <HeaderNav login-page/>

  <!-- 登录面板 -->
  <section class="login">
    <div class="login-type">
      <a :class="{checked: type === 'tel'}" @click="type = 'tel'">密码登录</a>
      <a :class="{checked: type === 'sms'}" @click="type = 'sms'">邮箱登录</a>
    </div>

    <form class="login-pwd login-panel" autocomplete="off" v-if="type === 'tel'">
      <input type="text" name="username" class="inp user" placeholder="手机号" v-model.trim="formData.tel"/>
      <input :type="eyeType" name="password" class="inp pwd" placeholder="密码" v-model.trim="formData.password"/>
      <!-- 处理密码眼睛 -->
      <span class="eye" @click="showEye = !showEye" :class="{clos:!showEye, open: showEye}"></span>

      <div class="re">
        <input type="checkbox" name="remember-me" id="remember-me" v-model="formData.rememberMe"/><label
          for="remember-me">下次自动登录</label>
        <a class="find-pass" @click="$router.push({name: 'find-pass'})">忘记密码，立即找回</a>
      </div>

      <a class="log-btn" @click="handleTelLogin">登录</a>

      <a href="/register" class="regist">没有账号？立即注册</a>

    </form>

    <form class="login-sms login-panel" autocomplete="off" v-if="type === 'sms'">
      <input type="text" name="email" class="inp tel" placeholder="邮箱地址" v-model="formData.email"/>
      <input type="code" name="code" class="inp code" placeholder="验证码" v-model="formData.code"/>
      <button class="btn-code" @click.prevent="getEmailCode" v-text="btnText"></button>

      <div class="re">
        <input type="checkbox" name="remember-me" id="remember" v-model="formData.rememberMe"/>
        <label for="remember">下次自动登录</label>
      </div>

      <a class="log-btn" @click="handleEmailLogin">登录</a>

      <a href="/register" class="regist">没有账号？立即注册</a>

    </form>

    <div class="third">
      <span class="lf"></span>第三方登录<span class="rf"></span>
    </div>

    <p class="third">
      <a class="zfb" :href="$api.authorizeUrl(formData.rememberMe ? 'on' : 'off')"><span>支付宝</span></a>
<!--      <a class="wx"><span>微信</span></a>-->
<!--      <a class="qq"><span>QQ</span></a>-->
    </p>

  </section>

  <Footer/>
</template>

<script>
import '../assets/css/login.css' ;
import Footer from "../components/Footer.vue";
import HeaderNav from '../components/HeaderNav.vue'
import {mapMutations} from 'vuex' ;

export default {
  data() {
    return {
      showEye: false, // 密码眼睛显示方式
      type: 'tel', // 登录方式 ， tel 或者 sms
      formData: {
        rememberMe: true,
      },
      btnText: "获取验证码"
    }
  },
  mounted() {
    if (this.$route.query.f === "success") {
      this.$toastr.success("账户激活成功");
      this.$router.push({name: "login"});
    }
  },
  components: {
    Footer,
    HeaderNav,
  },
  computed: {
    eyeType() {
      return this.showEye ? "text" : "password";
    }
  },
  methods: {
    ...mapMutations([
      "storeUserAndToken",
    ]),
    handleTelLogin() {
      if (this.formData.tel == null || this.formData.tel === "") {
        this.$toastr.warning("手机号不允许为空");
        return;
      }

      if (this.formData.password == null || this.formData.password === "") {
        this.$toastr.warning("密码不允许为空");
        return;
      }
      // 准备登录
      this.$api.loginTel(this.formData.tel, this.formData.password).then(ret => {
        if (ret.status) {
          // 将 用户信息、令牌、过期时间
          this.storeUserAndToken({
            user: ret.user, token: ret.accessToken, exp: ret.exp,
            refresh: ret.refreshToken, remember: this.formData.rememberMe
          });
          // 登录成功、跳转到系统首页
          this.$router.push("/");
        }

      })
    },
    handleEmailLogin() {
      if (this.formData.email == null || this.formData.email == "") {
        this.$toastr.warning("请先输入您的邮箱账号");
        return;
      }
      if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/g.test(this.formData.email)) {
        this.$toastr.warning("邮箱账号格式不正确");
        return;
      }

      if (this.formData.code == null || this.formData.code === "") {
        this.$toastr.warning("验证码不允许为空");
        return;
      }
      // 发送请求
      this.$api.emailLogin(this.formData.email, this.formData.code).then(ret=> {
          if (ret.status) {
            this.storeUserAndToken({
              user: ret.data.user, token: ret.data.accessToken, exp: ret.data.exp,
              refresh: ret.data.refreshToken, remember: this.formData.rememberMe
            });
            // 登录成功、跳转到系统首页
            this.$router.push("/");
          }
      })
    },
    getEmailCode(event) {
      if (this.formData.email == null || this.formData.email == "") {
        this.$toastr.warning("请先输入您的邮箱账号");
        return;
      }

      if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/g.test(this.formData.email)) {
        this.$toastr.warning("邮箱账号格式不正确");
        return;
      }
      //点击后开始倒计时 一分钟内 按钮不允许点击
      event.target.disabled = true;
      // 倒计时效果
      let numText = 60;
      let playing = setInterval(() => {
        event.target.innerText = numText + "S";
        if (numText <= 0) {
          clearInterval(playing);
          event.target.disabled = false;
          event.target.innerText = this.btnText;
        }
        numText--;
      }, 1000);
      // 发送异步请求，获取 该邮箱的验证码
      this.$api.getEmailCode(this.formData.email, "邮箱登录").then(ret => {
        if (ret.status) {
          this.$toastr.info("验证码已发送到您的邮箱、请注意查收");
        }
      }).catch(error => {
        clearInterval(playing);
        event.target.disabled = false;
        event.target.innerText = this.btnText;
      })
    }
  }
}

</script>

<style scoped>
footer {
  position: relative;
  width: 1200px;
  height: 100px;
  text-align: center;
  margin: 0 auto;
  top: 120px;
}

footer p {
  text-align: center;
  color: rgb(178, 178, 178);
  line-height: 20px;
  font-size: 12px;
}

footer .site {
  color: #1296DB;
}
</style>
